<template>
  <view class="register">
    <view class="register-bg"></view>
    <!-- 碎石 -->
    <view class="more-stone"></view>
    <!-- 碎石中的大哥 -->
    <view class="big-stone"></view>
    <!-- 地球 -->
    <view class="global"></view>
    <!-- 飞船 -->
    <view class="ship" @animationend="close"></view>
  </view>
</template>

<script>
export default {
  name: "register-animation",
  methods: {
    close() {
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
$offsetTop: 500rpx;

.register {
  width: 750rpx;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #000;

  & > view {
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
  }

  &-bg {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("https://staticcdn.youliao.com/static/image/www_m/activity/festival/register-bg.png");
    z-index: -1;
    background-position-y: $offsetTop;
  }

  .more-stone {
    width: 660rpx;
    height: 250rpx;
    top: $offsetTop + 20rpx;
    left: -50rpx;
    background-image: url("https://staticcdn.youliao.com/static/image/www_m/activity/festival/stone.png");
    animation: stoneAni 1s infinite;
  }

  @keyframes stoneAni {
    0% {
      transform: translate(-10rpx, -5rpx);
    }

    25% {
      transform: translate(-5rpx, -6rpx);
    }

    100% {
      transform: translate(-5rpx, -5rpx);
    }
  }

  .big-stone {
    width: 240rpx;
    height: 254rpx;
    top: $offsetTop + 130rpx;
    right: 110rpx;
    background-image: url("https://staticcdn.youliao.com/static/image/www_m/activity/festival/big-stone.png");
    animation: stoneAni 1s infinite reverse;
  }

  .global {
    width: 60rpx;
    height: 60rpx;
    top: $offsetTop + 40rpx;
    right: 40rpx;
    background-image: url("https://staticcdn.youliao.com/static/image/www_m/activity/festival/global.png");
    animation: stoneAni 1s infinite reverse 0.5s;
  }

  .ship {
    width: 100rpx;
    height: 422rpx;
    animation: shipAni 3s forwards, shipTwinklingAni 1s infinite;
    z-index: -1;
    background-image: url("https://staticcdn.youliao.com/static/image/www_pc/activity/festival/ship-twinkling.png");
  }

  @keyframes shipAni {
    0% {
      top: $offsetTop + 250rpx;
      left: 350rpx;
      transform: scale(1);
    }

    33% {
      top: $offsetTop + 780rpx;
      left: calc((100% - 100rpx) / 2);
      transform: scale(4);
    }

    66% {
      top: $offsetTop + 380rpx;
      left: -80rpx;
      transform: scale(2.5) rotate(20deg);
    }

    80% {
      opacity: 1;
    }

    100% {
      top: $offsetTop - 60rpx;
      left: 100%;
      transform: scale(1) rotate(-30deg);
      opacity: 0;
    }
  }

  @keyframes shipTwinklingAni {
    0% {
      background-image: url("https://staticcdn.youliao.com/static/image/www_pc/activity/festival/ship-twinkling.png");
    }

    100% {
      background-image: url("https://staticcdn.youliao.com/static/image/www_pc/activity/festival/ship1.png");
    }
  }
}
</style>
